<template>
	<view class="itemDetial">
		<view class="swipers">
			<u-swiper
				height="100%"
				:list="bannerList"
				@click="clickBanner"
			></u-swiper>
			<view class="buttons">
				<text>点击了解详情</text>
				<u-icon name="arrow-right" color="#fff" size="10"></u-icon>
			</view>
		</view>
 		<view class="contentBox">
			<view class="titles">{{dataInfo.activity_title}}</view>
			<view class="guiZeBox">
				<view class="titleBox">社区:{{dataInfo.title}}</view>
				<view class="cons">
					<view class="imgs">
						<!-- <image v-if="dataInfo.picarr" :src="dataInfo.picarr[0]" mode=""></image> -->
						<u-swiper
							height="100%"
							:list="dataInfo.picarr"
						></u-swiper>
					</view>
					<view class="nuberBox">
						<view class="items">
							<text>{{dataInfo.vote_num}}</text>
							<text>当前票数</text>
						</view>
						<view class="items">
							<text>{{dataInfo.rank}}</text>
							<text>排名</text>
						</view>
						<view class="items">
							<text>{{dataInfo.rank_num}}</text>
							<text>距上一名票数</text>
						</view>
					</view>
					<view class="textBox" v-html="dataInfo.content"></view>
					<view class="tpBtn" @click="clickTp">
						投票
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {projectDetail,activityDetial,projectSubmit,Projectbanners,Projectclick} from '../../request/api.js'
import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin.js';
	export default {
		data() {
			return {
				// 项目id
				id:'',
				// 活动id
				activity_id:14,
				dataInfo:{},
				bannerList:[],
				allBannerList:[]
			};
		},
		methods:{
			getprojectDetail(){
				projectDetail({
					id:this.id
				}).then(res=>{
					console.log(res);
					let picarr = res.data.picarr.split(',');
					this.dataInfo = res.data;
					this.dataInfo.picarr = picarr;
				})
			},
			// 点击投票
			clickTp(){
				uni.showLoading({
					title:'加载中'
				})
				projectSubmit({
					id:this.id
				}).then(res=>{
					uni.hideLoading()
					console.log(res);
					if(res.data){
						uni.showToast({
							icon:'none',
							title:'投票成功',
							success: () => {
								this.getprojectDetail()
							}
						});
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			// 获取轮播详情
			async getBannerList(){
				let data = await Projectbanners()
				console.log(data)
				// this.bannerList = data.data;
				let list = data.data;
				this.allBannerList = [...list]
				this.bannerList = list.map(item=>{
					return item.pic
				})
			},
			// 点击的轮播图
			async clickBanner(index){
				console.log(this.allBannerList[index]);
				uni.showLoading({
					title:'加载中'
				})
				await this.ProjectclickFun({
					id:this.allBannerList[index].id
				})
				uni.hideLoading()
				window.open(this.allBannerList[index].url)
			},
			// 调用banner点击记录接口
			ProjectclickFun(data){
				return new Promise((resolve,reject)=>{
					Projectclick(data).then(res=>{
						resolve(res)
					}).catch(err=>{
						reject(err)
					})
				})
			}
		},
		onLoad(option) {
			this.activity_id = uni.getStorageSync('activity_id')
			this.id = option.id; 
			this.getprojectDetail();
			this.getBannerList()
		}
	}
</script>

<style lang="less">
.itemDetial{
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	.swipers{
		width: 100%;
		height: 418rpx;
		flex: none;
		position: relative;
		.buttons{
			width: auto;
			padding: 5rpx 15rpx;
			background-color: #255EB2;
			color: #fff;
			font-size: 20rpx;
			border-radius: 4rpx;
			position: absolute;
			right: 0;
			bottom:0;
			display: flex;
			align-items: center;
			
		}
	}
	.contentBox{
		flex: 1;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		.titles{
			width: 560rpx;
			height: auto;
			font-size: 38rpx;
			color: #1D1D1D;
			line-height: 60rpx;
			margin: 0 auto;
			text-align: center;
			font-weight: bold;
		}
		.guiZeBox{
			width: 100%;
			height: auto;
			border-radius: 18rpx;
			overflow: hidden;
			margin-top: 21rpx;
			.titleBox{
				width: 100%;
				height: 102rpx;
				background-color: #255EB2;
				text-align: center;
				line-height: 102rpx;
				color: #fff;
				font-size: 31rpx;
				font-weight: bold;
			}
			.cons{
				width: 100%;
				height: auto;
				padding: 35rpx;
				box-sizing: border-box;
				background-color: #fff;
				.imgs{
					width: 100%;
					height: 300rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.nuberBox{
					width: 100%;
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 6px;
					box-sizing: border-box;
					border-radius: 28rpx;
					background-color: #fff;
					.items{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text{
							&:first-child{
								font-size: 38rpx;
								color: #255EB2;
								font-weight: bold;
							}
							&:last-child{
								font-size: 24rpx;
								color: #1E1E1E;
								margin-top: 20rpx;
							}
						}
						
					}
				}
				.textBox{
					width: 100%;
					height: auto;
					font-size: 24rpx;
					background-color: #fff;
					color: #1E1E1E;
					line-height: 48rpx;
					margin-top: 30rpx;
				}
				
			}
		}
	}
	.tpBtn{
		position: fixed;
		width: 247rpx;
		height: 64rpx;
		border-radius: 8rpx;
		background-color: #255EB2;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		line-height: 64rpx;
		margin-top: 20rpx;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}
</style>
